<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当日考勤</title>
    <link rel="stylesheet" href="<%= basePath %>/lib/sui.min.css">
    <link rel="stylesheet" href="<%= basePath %>/lib/sui-append.min.css">
    <link rel="stylesheet" href="<%= basePath %>/public/iconfont/iconfont.css">
    <link rel="stylesheet" href="<%= basePath %>/public/css/style.css">
    <link rel="stylesheet" href="<%= basePath %>/modules/teacher/css/style.css">

    <script type="application/javascript" src="<%= basePath %>/lib/jquery.min.js"></script>
    <script type="application/javascript" src="<%= basePath %>/lib/sui.min.js"></script>
    <script type="application/javascript" src="<%= basePath %>/modules/teacher/js/today.js"></script>
</head>

<body class="page_body">
<% include ../../public/header.ejs %>
<% include ../../public/slogan.ejs %>
<% include ../../public/tab_bar.ejs %>

<div class="content">
    <% include ../../public/menu.ejs %>

    <div class="frame body">
        <div class="body_breadcrumb">
            <div class="body_line"></div>
            <p class="breadcrumb_text">
                考勤系统 > 考勤管理 > <span class="breadcrumb_text_current">当日考勤</span>
            </p>
        </div>
        <div class="body_scroll">
            <!--NO.7 教师 当日考勤 吴亚-->
            <div class="frame-content">
                <ul class="info_list">
                    <li class="li_header">考勤报表</li>
                    <li class="li_info">
                        <span class="iconfont" style="color: #5396f1">&#xe61f;</span>
                        班级：
                        <span class="sui-dropdown dropdown-bordered select">
                            <span class="dropdown-inner">
                                <a role="button" data-toggle="dropdown" class="dropdown-toggle">
                                    <% if ( classes.length > 0 ) { %>
                                    <%= classes[0].name %>
                                    <% } %>
                                    <i class="caret" style=""></i>
                                </a>
                                <ul role="menu" aria-labelledby="drop1" class="sui-dropdown-menu">
                                    <%
                                    var firstClass = true;
                                            classes.forEach(function(natureClass) { %>
                                    <li data-id="<%= natureClass.id %>" role="presentation"
                                            <%= firstClass ? 'class="active"' : '' %>
                                            ><a role="menuitem" tabindex="-1" href="javascript:void(0);"><%= natureClass.name %></a>
                                    </li>
                                    <%
                                        firstClass = false
                                    });
                                    %>
                                </ul>
                            </span>
                        </span>
                        <a class="btn-search sui-btn btn-primary teacher_search_btn" style="margin-left: 15px; margin-top: -2px">查询</a>
                    </li>
                    <li class="li_footer">
                        <% classes.forEach(function(natureClass) { %>
                        <div style="width: 100%" data-id="<%= natureClass.id %>">
                            <div class="table_header_class_detail">
                                班级人数：<%= natureClass.students.length %>
                            </div>
                            <div class="table_header_class_detail">
                                迟到人数：<%= natureClass.statistics.lateCount %>
                            </div>
                            <div class="table_header_class_detail">
                                早退人数：<%= natureClass.statistics.earlyCount %>
                            </div>
                            <div class="table_header_class_detail">
                                请假人数：<%= natureClass.statistics.restCount %>
                            </div>
                            <div class="table_header_class_detail">
                                旷课人数：<%= natureClass.statistics.absenceCount %>
                            </div>
                            <div style="clear: both"></div>
                        </div>
                        <% }); %>
                    </li>
                    <li class="li_header">当日考勤</li>
                    <li class="li_info">
                        <span class="iconfont" style="color: #5396f1">&#xe61f;</span>
                            考勤：
                        <span class="sui-dropdown dropdown-bordered select">
                           <span class="dropdown-inner">
                                 <a id="select" role="button" href="javascript:void(0);" data-toggle="dropdown" class="dropdown-toggle">
                                     <input class="input-status" value="当日考勤表" name="city" type="hidden"><i class="caret"></i><span  style="font-size: 14px;">当日考勤表</span></a>
                                <ul role="menu" aria-labelledby="drop4" class="sui-dropdown-menu">
                                    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="当日考勤表" style="font-size: 14px;">当日考勤表</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="异常考勤表" style="font-size: 14px;">异常考勤表</a></li>
                                </ul>
                           </span>
                        </span>
                        <a class="btn-search-status sui-btn btn-primary teacher_search_btn" style="margin-left: 15px">查询</a>
                    </li>
                    <% classes.forEach(function(natureClass) { %>
                    <li class="li_footer" data-id="<%= natureClass.id %>">
                        <table class="sui-table table-zebra table-bordered attend_table">
                            <tbody>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th colspan="2">上午</th>
                                <th colspan="2">下午</th>
                                <th colspan="2">晚上</th>
                                <th>在校轨迹</th>
                            </tr>
                            <% natureClass.attendances.forEach(function(attendance) { %>
                            <tr data-error="<%=attendance.isError%>">
                                <td><%= attendance.student.sid %></td>
                                <td><%= attendance.student.name %></td>
                                <% attendance.values.forEach(function(value) { %>
                                <td><%= AttendanceDescriptions.get(value.enterStatus) %></td>
                                <td><%= AttendanceDescriptions.get(value.exitStatus) %></td>
                                <% }); %>
                                <td class="attend_table_detail" data-id="<%= attendance.id %>"
                                    onclick="tableDetailButtonClicked(event)">详细 <i
                                            class="iconfont icon-arrow-down attend_table_detail_arrow"></i></td>
                            </tr>
                            <tr data-id="attend_detail_area<%= attendance.id %>" class="table_detail_content_hide">
                                <td colspan="9" data-id="attend_detail_content<%= attendance.id %>" class="table_detail_background"
                                    style="height: 0; padding: 0; line-height: 0">
                                    <% if (attendance.tracks.length == 0) {%>
                                    <p style="font-size: 16px; text-align: center; margin-top: 10px; margin-bottom: 10px">暂无在校轨迹</p>
                                    <% } %>
                                    <%
                                    for ( var trackIndex in attendance.tracks ) {
                                        var track = attendance.tracks[trackIndex];
                                    if ( trackIndex == 0 ) {
                                    %>
                                    <div style="width: 100%; margin-top: 10px">
                                        <div style="width:50%;border-right: 1px solid #5396F1;position: relative">
                                            <div style="width: 12px;height: 12px;border-radius: 6px;background-color: #5396F1;right: -6px;position: absolute"></div>
                                            <p style="margin: 0">
                                <span style="float: right; margin-right: 20px; margin-top: -3px">
                                    <%= lib.util.formatTime(track.time) %>
                                </span>
                                    <span style="float: right; margin-right: 21px;margin-top: -3px">
                                        <%= track.description %>
                                    </span>
                                            </p>

                                            <div style="clear: both;"></div>
                                        </div>
                                    </div>
                                    <div style="width: 100%">
                                        <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%;height: 18px">
                                        </div>
                                    </div>
                                    <% }
                                    else if ( trackIndex == attendance.tracks.length - 1 ) {
                                    %>
                                    <div style="width: 100%">
                                        <div style="width: 50%;border-right: 1px solid #5396F1;margin-right: 50%;height: 18px">
                                        </div>
                                    </div>
                                    <div style="width: 100%; margin-bottom: 15px">
                                        <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%;position: relative">
                                            <div style="width: 12px;height: 12px;border-radius: 6px;background-color: #5396F1;bottom:0;left: -6px;position: absolute"></div>
                                            <p style="margin: 0">
                                    <span style="float: left; margin-left: 20px;margin-bottom: -3px;">
                                        <%= lib.util.formatTime(track.time) %>
                                    </span>
                                    <span style="float: left;margin-left: 21px;margin-bottom: -3px">
                                        <%= track.description %>
                                    </span>
                                            </p>

                                            <div style="clear: both"></div>
                                        </div>
                                    </div>
                                    <% }
                                    else if ( trackIndex % 2 == 1 ) {
                                    %>
                                    <div style="width: 100%">
                                        <div style="width:50%;border-right: 1px solid #5396F1;position: relative">
                                            <p style="margin: 0">
                                                <span style="float: right; width: 10px;height: 9px;border-bottom: 1px solid #5396F1"></span>
                                    <span style="float: right; margin-right: 11px;">
                                        <%= lib.util.formatTime(track.time) %>
                                    </span>
                                    <span style="float: right; margin-right: 21px;">
                                        <%= track.description %>
                                    </span>
                                            </p>

                                            <div style="clear: both"></div>
                                        </div>
                                    </div>
                                    <% }
                                    else {
                                    %>
                                    <div style="width: 100%">
                                        <div style="width: calc(50% - 1px);border-left: 1px solid #5396F1;margin-left: 50%">
                                            <p style="margin: 0">
                                                <span style="float:left;width: 10px;height: 9px; border-bottom: 1px solid #5396F1"></span>
                                    <span style="float: left; margin-left: 11px">
                                        <%= lib.util.formatTime(track.time) %>
                                    </span>
                                    <span style="float: left;margin-left: 21px">
                                        <%= track.description %>
                                    </span>
                                            </p>

                                            <div style="clear: both"></div>
                                        </div>
                                    </div>
                                    <% } %>
                                    <% } %>
                                </td>
                            </tr>
                            <tr style="display: none"></tr>
                            <% }); %>
                            </tbody>
                        </table>
                    </li>
                    <% }); %>
                </ul>
            </div>
        </div>
    </div>

</div>
<% include ../../public/footer.ejs %>
</body>
